import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle, useMemo } from "react"
import PropTypes from "prop-types"
import BScroll from "better-scroll"
import styled from 'styled-components';
import Loading from '../loading/index';
import Loading2 from '../loading-v2/index';
import { debounce } from "@/api/utils";
const ScrollContainer = styled.div`
 width: 100%;
 height: 100%;
 overflow: hidden;
`
const PullUpLoading = styled.div`
 position: absolute;
 left:0; right:0;
 bottom: 5px;
 width: 60px;
 height: 60px;
 margin: auto;
 z-index: 100;
`
export const PullDownLoading = styled.div`
 position: absolute;
 left:0; right:0;
 top: 0px;
 height: 30px;
 margin: auto;
 z-index: 100;
`
// 下为问题代码，以此为鉴
// useEffect(() => {
// if(bScroll) return;
// const scroll = new BScroll(scrollContaninerRef.current, {
// scrollX: direction === "horizental",
// scrollY: direction === "vertical",
// probeType: 3,
// click: click,
// bounce:{
// top: bounceTop,
// bottom: bounceBottom
// }
// });
// setBScroll(scroll);
// if(pullUp) {
// scroll.on('scrollEnd', () => {
// //判断是否滑动到了底部
// if(scroll.y <= scroll.maxScrollY + 100){
// pullUp();
// }
// });
// }
// if(pullDown) {
// scroll.on('touchEnd', (pos) => {
// //判断⽤户的下拉动作
// if(pos.y > 50) {
// debounce(pullDown, 0)();
// }
// });
// }
// if(onScroll) {
// scroll.on('scroll', (scroll) => {
// onScroll(scroll);
// })
// }
// if(refresh) {
// scroll.refresh();
// }
// return () => {
// scroll.off('scroll');
// setBScroll(null);
// }
// // eslint-disable-next-line
// }, []);
const Scroll = forwardRef((props, ref) => {
    const [bScroll, setBScroll] = useState();
    const scrollContaninerRef = useRef();
    const { direction, click, refresh, pullUpLoading, pullDownLoading, bounceTop, bounceBottom } = props;
    const { pullUp, pullDown, onScroll } = props;
    let pullUpDebounce = useMemo(() => {
        return debounce(pullUp, 500)
    }, [pullUp]);
    let pullDownDebounce = useMemo(() => {
        return debounce(pullDown, 500)
    }, [pullDown]);
    useEffect(() => {
        const scroll = new BScroll(scrollContaninerRef.current, {
            scrollX: direction === "horizental",
            scrollY: direction === "vertical",
            probeType: 3,
            click: click,
            bounce: {
                top: bounceTop,
                bottom: bounceBottom
            }
        });
        setBScroll(scroll);
        return () => {
            setBScroll(null);
        }
        // eslint-disable-next-line
    }, []);
    useEffect(() => {
        if (!bScroll || !onScroll) return;
        bScroll.on('scroll', onScroll)
        return () => {
            bScroll.off('scroll', onScroll);
        }
    }, [onScroll, bScroll]);
    useEffect(() => {
        if (!bScroll || !pullUp) return;
        const handlePullUp = () => {
            //判断是否滑动到了底部
            if (bScroll.y <= bScroll.maxScrollY + 100) {
                pullUpDebounce();
            }
        };
        bScroll.on('scrollEnd', handlePullUp);
        return () => {
            bScroll.off('scrollEnd', handlePullUp);
        }
    }, [pullUp, pullUpDebounce, bScroll]);
    useEffect(() => {
        if (!bScroll || !pullDown) return;
        const handlePullDown = (pos) => {
            //判断⽤户的下拉动作
            if (pos.y > 50) {
                pullDownDebounce();
            }
        };
        bScroll.on('touchEnd', handlePullDown);
        return () => {
            bScroll.off('touchEnd', handlePullDown);
        }
    }, [pullDown, pullDownDebounce, bScroll]);
    useEffect(() => {
        if (refresh && bScroll) {
            bScroll.refresh();
        }
    });
    useImperativeHandle(ref, () => ({
        refresh() {
            if (bScroll) {
                bScroll.refresh();
                bScroll.scrollTo(0, 0);
            }
        },
        getBScroll() {
            if (bScroll) {
                return bScroll;
            }
        }
    }));
    const PullUpdisplayStyle = pullUpLoading ? { display: "" } : { display: "none" };
    const PullDowndisplayStyle = pullDownLoading ? { display: "" } : { display: "none" };
    return (
        <ScrollContainer ref={scrollContaninerRef}>
            {props.children}
            {/* 滑到底部加载动画 */}
            <PullUpLoading style={PullUpdisplayStyle}><Loading></Loading></PullUpLoading>
            {/* 顶部下拉刷新动画 */}
            <PullDownLoading style={PullDowndisplayStyle}><Loading2></Loading2></PullDownLoading>
        </ScrollContainer>
    );
})
Scroll.defaultProps = {
    direction: "vertical",
    click: true,
    refresh: true,
    onScroll: null,
    pullUpLoading: false,
    pullDownLoading: false,
    pullUp: null,
    pullDown: null,
    bounceTop: true,
    bounceBottom: true
};
Scroll.propTypes = {
    direction: PropTypes.oneOf(['vertical', 'horizental']),
    refresh: PropTypes.bool,
    onScroll: PropTypes.func,
    pullUp: PropTypes.func,
    pullDown: PropTypes.func,
    pullUpLoading: PropTypes.bool,
    pullDownLoading: PropTypes.bool,
    bounceTop: PropTypes.bool,//是否⽀持向上吸顶
    bounceBottom: PropTypes.bool//是否⽀持向下吸顶
};
export default Scroll;